import React from "react";
import { Avatar } from "antd";
import styled from "@emotion/styled";
import { Dropdown, Menu, Space } from "antd";
import {
  IdcardOutlined,
  TeamOutlined,
  LogoutOutlined,
} from "@ant-design/icons";
import { Link } from "react-router-dom";
import { useAuth } from "context/auth-context"

export default function PageLayoutHeader() {
  const { user, logout } = useAuth()
  console.log(user)
  // const path = useLocation().pathname;
  const checkUserOpt = () => {
    let result = false;
    if (user?.roleId !== 2) {
      result = true;
    }
    return result;
  };

  const menu = (
    <Menu>
      <Menu.Item key="account">
        <Link to="/user/account">
          <Space>
            <IdcardOutlined />
            个人中心
          </Space>
        </Link>
      </Menu.Item>
      {checkUserOpt() ? (
        <Menu.Item key="member">
          <Link to="/user/member">
            <Space>
              <TeamOutlined />
              成员管理
            </Space>
          </Link>
        </Menu.Item>
      ) : null}

      <Menu.Item key="logout">
        <div onClick={() => logout()}>
          <Space>
            <LogoutOutlined />
            退出
          </Space>
        </div>
      </Menu.Item>
    </Menu>
  );
  return (
    <HeaderContainer>
      <Link to="/">
        <h3 style={{ fontWeight: 500 }}>数据管理</h3>
      </Link>
      <div style={{ marginRight: "20px" }}>
        <Dropdown overlay={menu} placement="bottomCenter">
          <div>
            <Avatar size={32}>
              {user && user.userName ? user.userName.substring(0, 1) : ""}
            </Avatar>
            <span style={{ marginLeft: "1rem" }}>{user?.userName}</span>
          </div>
        </Dropdown>
      </div>
    </HeaderContainer>
  );
}

const HeaderContainer = styled.header`
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
  height: 64px;
  box-sizing: border-box;
  margin-bottom: 2px;
`;
